@charset "utf-8";

$baseFont:40;
@function r($px){
 @return $px/$baseFont * 1rem;
}







html,body{
 width: 100%;
 height: 100%;
 overflow: hidden;
}



.web{
	width: 100%;
	height: 100%;
	position: relative;
	
	
	// 头部
	.header_content{
		width: 100%;
		height: r(89);
		background-color: #b20000;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		
		.left_logo{
			width: r(31);
			height: r(24);
			
			
			img{
				width: 100%;
				height: 100%;
				margin-top: r(33);
				margin-left: r(23);
			}
		}
		.middle_logo{
			display: inline-block;
			width: r(264);
			height: r(40);
			img{
				width: 100%;
				height: 100%;
				margin-top: r(25);
			}
		}
		.search_logo{
			width: r(42);
			height: r(42);
			img{
				width: 100%;
				height: 100%;
				margin-top: r(23);
				margin-right: r(17);
			}
		}
	}
	
	
	
	
	// 中间
	.middle_content{
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: r(89)  0 r(120);
		
		img{
			width: 100%;
			height: 100%;
		}
		.top{
			height: r(342);
			width: 100%;
			position: relative;
			z-index: -1;
			.to{
				width: 100%;
				height: r(104);
				position: absolute;
				background-color:rgba(0,0,0,0.4);
				top: 70%;
				display: flex;
				flex-wrap: wrap;
				justify-content:center;
				font-size: r(27);
				color: #FFFFFF;
				
				
				
				align-items: center;
				.tow{
					width: r(182);
					height: r(38);
					background-color: #B20000;
					margin-left: r(12);
					line-height: r(38);
					
				}
				.tos{
					margin-right: r(12);
				}
				span{
					width: r(9);
					height: r(8);
					border-radius: 50px;
					border: 1px solid #FFFFFF;
					background-color: #FFFFFF;
					margin-left: r(23);
					margin-bottom: r(25);
				}
			}
		}
		
		// 浮动盒子
		.center{
			height: r(1105);
			width: 100%;
			margin-top: r(-68);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: r(89)  0 r(96);
			.centre{
				width: r(282);
				height: r(343);
				
				background-color: #f6f6f6;
				margin-bottom: r(22);
				.img{
					width: r(282);
					height: r(182);
				}
				.box{
					display: flex;
					flex-wrap: wrap;
					.head{
						font-size: r(22);
						color: #010101;
						margin-top: r(15);
						margin-left: r(3);
					}
					.red{
						width: r(88);
						height: r(27);
						background-color: #b20000;
						color: #FFFFFF;
						border: 1px solid #b20000;
						border-radius: 3px;
						text-align: center;
						margin-top: r(15);
						margin-left: r(9);
					}
					.na2{
						
						margin-left: r(33);
						width: r(19);
						height: r(16);
						margin-top: r(19);
					}
					.na3{
						
						margin-left: r(16);
						width: r(19);
						height: r(16);
						margin-top: r(19);
					}
					span{
						color: #c5c5c5;
						font-size: r(20);
						margin-left: r(7);
						
						margin-top: r(19);
					}
					.img2{
						width: r(35);
						height: r(35);
						margin-top: r(14);
						margin-left: r(9);
					}
					.name{
						width: r(195);
						height: r(18);
						font-size: r(18);
						color: #c5c5c5;
						margin-left: r(8);
						margin-top: r(25);
					}
					
				}
			}
		}
		.wire{
			width: r(583);
			background-color:rgba(0,0,0,0.1);
			margin-top: r(101);
			border: 0.5px solid #dddddd;
			margin-left: r(28);
			
		}
		.btn{
			color: #bbbbbb;
			font-size: r(22);
			margin-top: r(20);
			margin-left: r(274);
		}
		
		
		
		
		
	}
	
	
	
	
	
	
	
	
	// 尾部
	.footer_content{
		position: absolute;
		bottom: 0;
		left: 0;
		height: r(96);
		width: 100%;
		background-color: #f5f5f5;
		li{
			float: left;
			width: 20%;
			text-align: center;
			margin-top: r(18);
			a{
				color: #8c8c8c;
				
			}
			.li_img{
				height: r(46);
			}
			p{
				font-size: 12px;
			}
			
			
		}
		
	}

}




// 左边
#left:checked ~ .ming {
	transform: translateX(0);
}
#left{
	display: none;
}

.ming{
	height: 100%;
	width: 100%;
	background-color: #21201b;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	transition: all .5s ease-in;
	
	.head{
		width: 100%;
		height: r(95);
		
		
		.iconfont{
			padding-top: r(17);
			margin-left: r(12);
			font-size: 25px;
			float: left;
			color: red;
		}
		input{
			width: r(545);
			height: r(50);
			border: 1px solid #FFFFFF;
			border-radius: 15px;
			float: left;
			margin-left: r(20);
			margin-top: r(17);
			background-color: #21201b;
			position: relative;
			text-indent: 3em;
			color: white;
		}
		.hea{
			position: absolute;
			left: r(80);
			color: #FFFFFF;
		}
		
	}
	.spring{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.1);
		margin-left: r(24);
		border-bottom: 1px solid #dddddd;
		opacity: 0.2;
	}
	.spring2{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.1);
		margin-left: r(24);
		border-bottom: 1px solid #dddddd;
		opacity: 0.2;
		margin-top: r(19);
	}
	
	.middle{
		width: 100%;
		height: r(395);
		
		.img{
			width: r(145);
			height: r(145);
			margin: 0 auto;
			text-align: center;
			img{
				width: 100%;
				height: 100%;
				margin-top: r(92);
			}
			h2{
				font-size: r(30);
				margin-top: r(19);
				color: #FFFFFF;
			}
			a{
				// color: #21201b;
				opacity: 0.2;
				color: #FFFFFF;
			}
			
		}
	}
	.spr{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.5);
		margin-left: r(24);
		border: 4px solid #dddddd;
		opacity: 0.2;
	}
	
	
	// 底部
	.com{
		width: 100%;
		height: r(92);
		p{
			float: left;
			font-size: r(30);
			color: #FFFFFF;
			margin-top: r(53);
			margin-left: r(24);
		}
		span{
			float: left;
			font-size: r(30);
			color: #FFFFFF;
			margin-top: r(53);
			margin-left: r(470);
		}
	}
}





// 右边
#right:checked ~ .ning{
	transform: translateX(0);
}

#right{
	display: none;
	
	}
.ning{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(100%);
	transition: all 0.5s ease-in;
	background-color: #f1f1f1;
	
	.top{
		width: 100%;
		height: r(98);
		background-color: #21201b;
		input{
			width: r(545);
			height: r(50);
			border: 1px solid #FFFFFF;
			border-radius: 15px;
			float: left;
			margin-left: r(20);
			margin-top: r(17);
			background-color: #21201b;
			position: relative;
			text-indent: 3em;
			color: white;
		}
		.hea{
			position: absolute;
			color: #FFFFFF;
			top: r(25);
			left: r(26);
		}
		.button{
			color: #FFFFFF;
			font-size: r(30);
			line-height: r(90);
			margin-left: r(570);
		}
		
		.h2{
			font-size: r(35);
			font-weight: bold;
			margin-top: r(41);
			margin-left: r(30);
		}
		
		.row{
			height: r(238);
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: r(21);
			margin-left: r(30);
			.rows{
				padding:0 r(20);
				
				background-color: #FFFFFF;
				height: r(60);
				line-height: r(63);
				margin-right: r(11);
				margin-bottom: r(13);
				font-size: r(30);
				color: rgba(0, 0, 0, 0.6);
				// color: #dddddd;
			}
		}
		
	}
		
	
}



